<template>
    <div class="bg">
        <nav-com title="首页" :showView='showView' @back="backHandler()"></nav-com>
        <van-pull-refresh v-model = 'isLoading' @refresh='onRefresh'>
        <div class="home_top">
            <img @click="zjHandler" src='../../assets/banner.gif' />
        </div>
        <ul class="list_box" >
            <li  v-for="(item,index) in list" :key="index">
                <div @click="handerDetails(item.id)">
                    <img class="box_img" :src='item.picUrl'>
                    <div class="box_title">
                        <img src='../../assets/title.png'>
                        <p>{{item.name}}</p>
                    </div>
                    <div class="box_price">
                        <span>￥</span>
                        <p>{{item.unitPrice}}</p>
                    </div>
                </div>
            </li>
        </ul>
        </van-pull-refresh>
    </div>
</template>
<script>
import {getBagIdItem }  from '@/api/api'
import navCom from '@/component/nav'
export default {
    name:'index',
    components:{
        navCom
    },
    data() {
        return {
            list:[],
            showView:false,
            isLoading:false,
        }
    },
    mounted(){
        this.init()
    },
    methods:{
        onRefresh(){
            this.init()
            this.isLoading = false
        },
        //初始化
        init(){
           getBagIdItem({bagId:'100008'}).then(res=>{
                this.list = res.data.data.giftItems
           }) 
        },
        //返回
        backHandler(){
            this.$router.go(-1)
        },
        //跳转详情
        handerDetails(id){
            this.$router.push({name:'odersDetails',params:{id:id}})
        },
        zjHandler(){
            // this.$router.push('/zjdetails')
        },
    }

}
</script>
<style scoped>
p {margin:0; padding:0;}
.bg {background: #F1F3F6; min-height: 100vh;}
.home_top {margin:0vw 4vw; }
.home_top img {width:92vw;}
.list_box {margin-left:4vw; margin-right:4vw; overflow:hidden; display: flex; justify-content: space-between; flex-flow:wrap;}
.list_box li {background: #fff; border-radius: 3vw; width:44vw; margin-top:4vw;}
.list_box li .box_img {width:44vw; border-top-left-radius:3vw; border-top-right-radius:3vw;}
.list_box .box_title {font-size:3.4vw; margin-top:2vw;}
.list_box .box_title img {width:12vw; margin-left:2.6vw; margin-right:2vw; float:left;}
.list_box .box_price {margin-top:1.3vw; margin-bottom:2.6vw;}
.list_box .box_price span {font-size:3.2vw; margin-top:1.3vw; margin-left:2.6vw; color:#D0021B; float: left; display: block;}
.list_box .box_price p {font-size:4.8vw; color:#D0021B;}
</style>